Vertical scroll snap
Creates a scrollable container that will snap on elements when scrolling.
- Use
display: grid
andgrid-auto-flow: row
to create a vertical layout. - Use
scroll-snap-type: y mandatory
andoverscroll-behavior-y: contain
to create a snap effect on vertical scroll. - You can use
scroll-snap-align
with eitherstart
,stop
orcenter
to change the snap alignment.
<div class="vertical-snap"> <a href="#"><img src="https://picsum.photos/id/1067/640/640"></a> <a href="#"><img src="https://picsum.photos/id/122/640/640"></a> <a href="#"><img src="https://picsum.photos/id/188/640/640"></a> <a href="#"><img src="https://picsum.photos/id/249/640/640"></a> <a href="#"><img src="https://picsum.photos/id/257/640/640"></a> <a href="#"><img src="https://picsum.photos/id/259/640/640"></a> <a href="#"><img src="https://picsum.photos/id/283/640/640"></a> <a href="#"><img src="https://picsum.photos/id/288/640/640"></a> <a href="#"><img src="https://picsum.photos/id/299/640/640"></a> </div>
.vertical-snap { margin: 0 auto; display: grid; grid-auto-flow: row; gap: 1rem; width: calc(180px + 1rem); padding: 1rem; height: 480px; overflow-y: auto; overscroll-behavior-y: contain; scroll-snap-type: y mandatory; } .vertical-snap > a { scroll-snap-align: center; } .vertical-snap img { width: 180px; object-fit: contain; border-radius: 1rem; }